import React from "react";
import { 
    HeaderWrapper, 
    Logo, 
    Nav, 
    NavItem, 
    NavSearch, 
    Addition, 
    Button, 
    SearchWraper,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoList,
    SearchInfoItem } from "./style";
import { CSSTransition } from "react-transition-group";
import "../../statics/iconfont/iconfont.css"
import { connect } from "react-redux"
import { headerAction } from "./store"
class Header extends React.Component {
    // 热门搜索
    getSearchList () {
        const { focused, 
            list, 
            page, 
            totalPage, 
            mouseIn, 
            handlerMouseEnter, 
            handlerMouseLeave,
            handlerChangePage,
             } = this.props;
        const newList = list.toJS();
        const pageList = [];
        // 根据page算出显示10条数据
        if(newList.length) {
            for(let i = (page - 1)*10;i<page*10;i++){
                pageList.push(<SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>)
            }
        }
        if(focused || mouseIn) {
            return <SearchInfo
                onMouseEnter={handlerMouseEnter}
                onMouseLeave={handlerMouseLeave}
            >
                <SearchInfoTitle>
                    热门搜索
                    <SearchInfoSwitch
                        onClick={()=>handlerChangePage(page, totalPage,this.spin)}
                    >
                        <i 
                        ref={(spin) => (this.spin=spin)}
                        className="iconfont icon-weibiaoti-- spin"></i>
                        换一换
                    </SearchInfoSwitch>
                </SearchInfoTitle>
                <SearchInfoList>
                    {pageList}
                </SearchInfoList>
            </SearchInfo>;
        }else{
            return null;
        }
    }
    render(){
        const {handleInputFocus,handleInputBlur,focused,list} = this.props;
        return (<div>
            <HeaderWrapper>
                <Logo />
                <Nav>
                    <NavItem className="left active">首页</NavItem>
                    <NavItem className="left">下载APP</NavItem>
    
                    <NavItem className="right">登录</NavItem>
                    <NavItem className="right">
                        <i className="iconfont icon-Aa"></i>
                    </NavItem>
                    <SearchWraper>
                        <CSSTransition in={focused} timeout={200} classNames="slide">
                            <NavSearch
                                onFocus={()=>{handleInputFocus(list)}}
                                onBlur={handleInputBlur}
                                className={focused ? "focused" : ""}
                            ></NavSearch>
                        </CSSTransition>
                        <i className={focused ? "focused iconfont icon-fangdajing" : "iconfont icon-fangdajing"}></i>
                        {this.getSearchList()}
                    </SearchWraper>
    
                </Nav>
                <Addition>
                    <Button className="write">写文章
                <i className="iconfont icon-sign-review"></i>
                    </Button>
                    <Button className="reg">注册</Button>
                </Addition>
            </HeaderWrapper>
    
        </div>);
    }
};

const mapStateProps = (state) => {
    return {
        focused: state.getIn(["header","focused"]),
        list:state.getIn(["header","list"]),
        page: state.getIn(["header","page"]),
        mouseIn: state.getIn(["header","mouseIn"]),
        totalPage: state.getIn(["header","totalPage"])
    }
}
const mapDisptchProps = (dispatch)=> {
    return {
        handleInputFocus(list) {
            list.size ===0 && dispatch(headerAction.getList());
            dispatch(headerAction.getFocuseAction());
        },
        handleInputBlur(){
            dispatch(headerAction.getBlurAction());
        },
        handlerMouseEnter(){
            dispatch(headerAction.getMouseEnter());
        },
        handlerMouseLeave(){
            dispatch(headerAction.getMouseLeave());
        },
        handlerChangePage(page, totalPage,spin){
            let originAngle = spin.style.transform.replace(/[^0-9]/gi, "");
            console.log(spin.style.transform);
            if(originAngle) {
                originAngle = parseInt(originAngle, 10);
            }else{
                originAngle = 0;
            }
            spin.style.transform = `rotate(${originAngle+360}deg)`;
            if(page<totalPage){
                dispatch(headerAction.changePage(page+1));
            }else{
                dispatch(headerAction.changePage(1))
            }
        

        },
    };
};
export default connect(mapStateProps, mapDisptchProps)(Header);